<template>
	<view class="container">
		<!-- 页面标题 -->
		<view class="page-header">
			<text class="page-title">数据分析中心</text>
			<text class="page-subtitle">全方位用电数据统计分析</text>
		</view>

		<!-- 分析功能网格 -->
		<view class="analysis-grid">
			<view 
				v-for="chart in charts" 
				:key="chart.id" 
				class="analysis-card"
				:class="getCardClass(chart.id)"
				@click="open(chart.id, chart.name)"
			>
				<view class="card-icon">
					<image 
						mode="aspectFit" 
						:src="`../../static/icons/${chart.id}.png`"
						class="icon-image"
					></image>
				</view>
				<view class="card-content">
					<text class="card-title">{{ chart.name }}</text>
					<text class="card-description">{{ chart.description }}</text>
					<view class="card-stats">
						<text class="stats-label">数据点</text>
						<text class="stats-value">{{ chart.dataPoints }}</text>
					</view>
				</view>
				<view class="card-arrow">
					<text class="arrow-icon">›</text>
				</view>
				<view class="card-overlay"></view>
			</view>
		</view>

		<!-- 快速统计 -->
		<view class="quick-stats">
			<view class="stats-header">
				<text class="stats-title">快速统计</text>
				<text class="stats-subtitle">实时数据概览</text>
			</view>
			<view class="stats-row">
				<view class="stat-item">
					<view class="stat-icon">📊</view>
					<view class="stat-content">
						<text class="stat-label">总工厂数</text>
						<text class="stat-value">7</text>
					</view>
				</view>
				<view class="stat-item">
					<view class="stat-icon">⚡</view>
					<view class="stat-content">
						<text class="stat-label">日均用电</text>
						<text class="stat-value">1,245</text>
						<text class="stat-unit">KWH</text>
					</view>
				</view>
			</view>
			<view class="stats-row">
				<view class="stat-item">
					<view class="stat-icon">📅</view>
					<view class="stat-content">
						<text class="stat-label">监控天数</text>
						<text class="stat-value">365</text>
					</view>
				</view>
				<view class="stat-item">
					<view class="stat-icon">🌱</view>
					<view class="stat-content">
						<text class="stat-label">碳排放</text>
						<text class="stat-value">1,890</text>
						<text class="stat-unit">KG</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	onShareAppMessage() {
		return {
			title: 'ECharts 可以在 uni-app 中使用啦！',
			path: '/pages/index/index',
			success: function() {},
			fail: function() {}
		}
	},
	data() {
		return {
			charts: [
				{
					id: 's_factory',
					name: '工厂用电量',
					description: '各工厂用电量对比分析',
					dataPoints: '7个工厂'
				},
				{
					id: 's_month',
					name: '月度用电',
					description: '月度用电趋势统计',
					dataPoints: '12个月'
				},
				{
					id: 's_day',
					name: '日用电量',
					description: '每日用电结构分析',
					dataPoints: '365天'
				}
			]
		}
	},
	methods: {
		// 打开分析页面
		open(id, name) {
			uni.navigateTo({
				url: `../${id}/index?name=${name}`
			})
		},
		
		// 获取卡片样式类
		getCardClass(id) {
			const classMap = {
				's_factory': 'card-blue',
				's_month': 'card-green',
				's_day': 'card-orange'
			};
			return classMap[id] || 'card-default';
		}
	}
}
</script>

<style scoped>
	.container {
		padding: 20rpx;
		background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
		min-height: 100vh;
	}

	/* 页面标题 */
	.page-header {
		text-align: center;
		padding: 40rpx 0 50rpx;
	}

	.page-title {
		display: block;
		font-size: 48rpx;
		font-weight: 700;
		color: #1a1a1a;
		margin-bottom: 12rpx;
	}

	.page-subtitle {
		display: block;
		font-size: 28rpx;
		color: #666;
		opacity: 0.8;
	}

	/* 分析功能网格 */
	.analysis-grid {
		margin-bottom: 40rpx;
	}

	.analysis-card {
		position: relative;
		padding: 40rpx 30rpx;
		margin-bottom: 30rpx;
		border-radius: 20rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
		overflow: hidden;
		transition: all 0.3s ease;
		display: flex;
		align-items: center;
	}

	.analysis-card:active {
		transform: scale(0.98);
	}

	.card-blue {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}

	.card-green {
		background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
	}

	.card-orange {
		background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
	}

	.card-default {
		background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
	}

	.card-icon {
		width: 120rpx;
		height: 120rpx;
		margin-right: 30rpx;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.icon-image {
		width: 80rpx;
		height: 80rpx;
		filter: brightness(0) invert(1);
	}

	.card-content {
		flex: 1;
		z-index: 2;
		position: relative;
	}

	.card-title {
		display: block;
		font-size: 36rpx;
		font-weight: 700;
		color: #ffffff;
		margin-bottom: 8rpx;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
	}

	.card-description {
		display: block;
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.8);
		margin-bottom: 12rpx;
		line-height: 1.4;
	}

	.card-stats {
		display: flex;
		align-items: center;
		gap: 12rpx;
	}

	.stats-label {
		font-size: 20rpx;
		color: rgba(255, 255, 255, 0.7);
	}

	.stats-value {
		font-size: 28rpx;
		font-weight: 600;
		color: #ffffff;
		background: rgba(255, 255, 255, 0.2);
		padding: 6rpx 12rpx;
		border-radius: 8rpx;
	}

	.card-arrow {
		margin-left: 20rpx;
		z-index: 2;
		position: relative;
	}

	.arrow-icon {
		font-size: 40rpx;
		color: rgba(255, 255, 255, 0.8);
		font-weight: 300;
	}

	.card-overlay {
		position: absolute;
		top: 0;
		right: 0;
		width: 200rpx;
		height: 100%;
		background: rgba(255, 255, 255, 0.05);
		border-radius: 50%;
		transform: translateX(50%);
	}

	/* 快速统计 */
	.quick-stats {
		padding: 40rpx 30rpx;
		background: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	}

	.stats-header {
		margin-bottom: 40rpx;
	}

	.stats-title {
		display: block;
		font-size: 36rpx;
		font-weight: 600;
		color: #1a1a1a;
		margin-bottom: 8rpx;
	}

	.stats-subtitle {
		display: block;
		font-size: 24rpx;
		color: #666;
	}

	.stats-row {
		display: flex;
		gap: 20rpx;
		margin-bottom: 30rpx;
	}

	.stats-row:last-child {
		margin-bottom: 0;
	}

	.stat-item {
		flex: 1;
		padding: 30rpx 24rpx;
		background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
		border-radius: 16rpx;
		border: 2rpx solid #e9ecef;
		display: flex;
		align-items: center;
		transition: all 0.2s ease;
	}

	.stat-item:hover {
		transform: translateY(-4rpx);
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
	}

	.stat-icon {
		font-size: 40rpx;
		margin-right: 20rpx;
		opacity: 0.8;
	}

	.stat-content {
		flex: 1;
	}

	.stat-label {
		display: block;
		font-size: 24rpx;
		color: #666;
		margin-bottom: 8rpx;
	}

	.stat-value {
		display: block;
		font-size: 36rpx;
		font-weight: 700;
		color: #1a1a1a;
		margin-bottom: 4rpx;
	}

	.stat-unit {
		display: block;
		font-size: 20rpx;
		color: #999;
	}

	/* 响应式设计 */
	@media (max-width: 750rpx) {
		.container {
			padding: 15rpx;
		}
		
		.analysis-card {
			flex-direction: column;
			text-align: center;
			padding: 30rpx 20rpx;
		}
		
		.card-icon {
			margin-right: 0;
			margin-bottom: 20rpx;
		}
		
		.card-arrow {
			margin-left: 0;
			margin-top: 20rpx;
		}
		
		.stats-row {
			flex-direction: column;
			gap: 15rpx;
		}
		
		.stat-item {
			justify-content: center;
			text-align: center;
		}
	}
</style>
